<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="description" content="BWRM"/>  
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">  
	<script src="../pagesJs/rem2px.js"></script> 
  <title>BWRM</title>
  <style>
    *{margin: 0;padding: 0;}
    html,body{
      width: 100%;
      height: 100%;
      background : linear-gradient(0deg,#fff 0%, #F94242 5%, #F47042 100%  );
      overflow: hidden;
      position: relative;
    } 
    @font-face{
      font-family: 'Semibold';  
      src: url('../pagesCss/Semibold.ttf') format('truetype')
    }
    .download-wrap{
      width: 100%;
      height: 100%;
      position: relative;
     }
     .download-wrap .logo{
       width: 7.76rem;
       margin: 1.6rem 1.36rem .36rem;
     }
     .download-wrap .top-tips{
      font-family: PingFangSC-Medium;
      font-size: 1.28rem;
      color: #FFFFFF;
      letter-spacing: .13rem;
      margin-left: 1.36rem
     }
     .download-wrap .download-middle{
       position: relative;
       width: 100%;
       height: 11.6rem;
     }
     .download-wrap .download-middle .download-box{
       width: 100%;
       position: absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
     }
     .download-wrap .show-number{
      width: 100%;
      text-align: center;
      /* margin-top: 3.32rem; */
     }
     .download-wrap .show-number .ani-number{
      /* font-family: Semibold; */ 
      font-size: 4rem;
      color: #FFFFFF;
      letter-spacing: 0; 
     }
     .download-wrap .show-number .right-number{  
      font-size: 1.92rem;
      color: #FFFFFF;
      letter-spacing: 0; 
     }
     .download-wrap .tips-number{ 
      font-family: Semibold; 
      font-size: 2.4rem;
      color: #FFFFFF;
      letter-spacing: .71rem; 
      text-align: center;
      margin-top: .6rem;
     }
     .download-wrap .download-footer{
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
     }
     .download-wrap .footer-bg{
      width: 100%;
      /* margin-top: 4.36rem */
     }
     .download-wrap .footer{
      width: 100%;
      background: #fff;
      margin: -0.4rem 0
     }
     .download-wrap .footer .btn-wrap{
      width: 22.4rem;
      height: 3.84rem;
      position: relative;
      margin: auto;
      padding-top: .4rem
     }
     .download-wrap .footer .btn-wrap img{
       width: 100%;
     }
     .download-wrap .footer .btn-wrap p{
      height:  1.76rem;
      line-height: 1.76rem;
      font-family: PingFangSC-Medium;
      font-size: 1.76rem;
      color: #000000;
      letter-spacing: .24rem;
      text-align: center; 
      color: #fff;
      position: absolute;
      top: 0;bottom: 0;
      left: 0;right: 0;
      margin: auto;
     }
     .download-wrap .footer .footer-tips{
      font-family: PingFangSC-Medium;
      font-size: 1.6rem;
      color: #FF2525;
      letter-spacing: .18rem;
      text-align: center;
      font-weight: 700;
      padding: 1.2rem 0 1.68rem;
     }
     .loading-warap{
       width: 100%;
       height: 100%;
       background: #fff;
       position: fixed;
       top:0;
       left: 0;
       z-index: 999;
     }
     .loading-warap img{
       width: 9.6rem;
       position: absolute;
       top: 0;bottom: 0;
       left: 0;right: 0;
       margin: auto;
     }
    .clearfix {
      zoom: 1;
    }
    .clearfix:after {
      display: block;
      content: "";
      height: 0;
      clear: both;
      visibility: hidden;
      overflow: hidden;
    }
    .left {float: left;}
    .right { float: right;}
     #openinstall_shadow{
       display: none!important;
     }
     .mask-wrap{
       display: none;
       width: 100%;
       height: 100%;
       position: fixed;
       top: 0;
       left: 0;
       background: rgba(23,24,35,0.7);
       z-index: 99999;
     }
     .guide-line{
      width: 5.76rem;
      position: absolute;
      right: 2.35rem;
      top: 1.2rem;
     }
     .tips-box{
       display: flex;
       justify-content: center;
       text-align: center;
      width: 100%;
      height: 3.64rem;
      position: absolute;
      top: 5.24rem;
      left: 0;
     }
     .tips-box .item2{
       display: inline-block;
       width: 5.2rem; 
       text-align: center;
     }
     .tips-box .item2 img{
       width: 3.64rem; 
     }
     .tips-box .item2 p{ 
       font-family: PingFangSC-Regular;
      font-size: .88rem;
      color: #EDEDED;
      letter-spacing: 0;
      text-align: center;
      word-wrap: break-word;
      margin-top: .4rem;
     }
     .tips-box .item{
       display: inline-block;
      height: 3.64rem;
      line-height: 3.64rem;
      font-family: PingFangSC-Regular;
      font-size: 1.28rem;
      color: #FFFFFF;
      letter-spacing: 0;
     } 
     .guide-box{
      width: 22.4rem;
      background: #FFFFFF;
      border-radius: .64rem; 
      position: absolute;
      top: 13.6rem;
      left: 0;right: 0;
      margin: auto;
     }
     .guide-box .guide-box-tips1{
      font-family: PingFangSC-Regular;
      font-size: 1.04rem;
      color: #818181;
      letter-spacing: 0;
      margin: 1.6rem .8rem 0;
     }
     .guide-box .guide-box-tips2{
      font-family: PingFangSC-Regular;
      font-size: 1.04rem;
      color: #303133;
      letter-spacing: 0;
      margin: .32rem 0 0 .8rem;
     }
     .guide-box .guide-box-course{
       width: 20.8rem;
       margin: .64rem 0.8rem .8rem;
     }
     .guide-box .guide-box-close{
      width: 1.2rem;
      position: absolute;
      top: .8rem;
      right: .8rem;
      z-index: 99999999
     }
     .footer-bg2{
       display: none;
     }
  </style>
</head>

<body> 
  <div class="loading-warap">
    <img src="../img/loading.gif" alt="">
  </div>
  <div class="download-wrap">
    <div class="download-header">
      <img class="logo" src="../pagesImg/download/logo.png" alt="">
      <p class="top-tips">百万人帮你转发广告到朋友圈</p>
    </div>
    <div class="download-middle">
      <div class="download-box">
        <div class="show-number">
            <span class="ani-number" id="targetId">625876</span>
            <span class="right-number">位广告主</span>
        </div>
        <div class="tips-number">
          在这里发展事业
        </div>
      </div>
        
    </div>
    <div class="download-footer">
      
      <img class="footer-bg footer-bg1" src="../pagesImg/download/bg.jpg" alt="">
      <img class="footer-bg footer-bg2"  src="../pagesImg/download/bgx.jpg" alt="" >
      <div class="footer">
        <div class="btn-wrap"  id="downloadButton">
          <img src="../pagesImg/download/button.png" alt="">
          <p >下载BWRM</p>
        </div>
        <p class="footer-tips">卖货 涨粉丝 招代理伙伴</p>
      </div>
    </div>
  </div> 
  <div class="mask-wrap" id="maskGuide"> 
    <img class="guide-line" src="../pagesImg/download/line.png" alt="">
    <div class="tips-box clearfix">
      <p class="item left">点击右上角“…”, 选择</p>
      <div class="item2 left">
        <img  id="maskGuideIcon" src="../pagesImg/download/liulanqi.png" alt="">
        <p id="maskGuideTips">在浏览器中<br/> 打开</p>
      </div>
      <p class="item left">下载</p>
    </div>
  </div>
  <div class="mask-wrap" id="maskCourse">
    <div class="guide-box">
      <img class="guide-box-close" src="../pagesImg/download/close.png" alt="" onclick="closeCourse()">
      <p class="guide-box-tips1">安装完成，请开始设置！</p>
      <p class="guide-box-tips2">若安装后无法正常使用，请删除旧版BWRM</p>
      <img class="guide-box-course" src="../pagesImg/download/course.gif" alt="">
    </div>
  </div>
  <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>  
	<script src="../pagesJs/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script> 
  <script type="text/javascript" charset="UTF-8" src="//res.cdn.openinstall.io/openinstall.js"></script>
  <script type="text/javascript">
    /*判断是否在微信浏览器上打开*/
    function isWeiXinBrowser () {
      var ua = window.navigator.userAgent.toLowerCase();
      //console.log(ua);mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
      } else {
        return false;
      }
      return false;
    } 
    function isAndroind() {
      var ua =  window.navigator.userAgent;
      var isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1; //android终端
      return isAndroid;
    }
    function closeCourse(){
      $(".mask-wrap").hide()
    } 
    
    setTimeout(function(){
      $(".loading-warap").hide();
    },1200) ;
    setTimeout(function(){
      var bodyHeight = $(".download-wrap").height();
      if(parseInt(bodyHeight) >= 800 ){
        $(".footer-bg2").show();
        $(".footer-bg1").hide();
      }else{
        $(".footer-bg1").show();
        $(".footer-bg2").hide();
      }
      var bodyHeaderH = $(".download-header").height();
      var bodyMiddlerH = $(".download-middle").height();
      var bodyFooterH = $(".download-footer").height();
      $(".download-middle").css({
        "height": ( (bodyHeight-bodyHeaderH-bodyFooterH) ) + "px"
      })
    },1000);
    var ran = parseInt(Math.random()  * (630000 - 625876)+ 625876) ;
    var ran_time = parseInt(Math.random()  * (3 - 1)+ 1) ;
    $(".ani-number").html(ran); 
    $(".ani-number").numScroll({
      time: 3500,
      delay:1300
    });  
    var data = OpenInstall.parseUrlParams();//openinstall.js中提供的工具函数，解析url中的所有查询参数
    new OpenInstall({
      appKey: "xw0dq6",
      onready: function () {
        var m = this, button = document.getElementById("downloadButton");
        button.style.visibility = "visible";
        /*在app已安装的情况尝试拉起app*/
        m.schemeWakeup();
        /*用户点击某个按钮时(假定按钮id为downloadButton)，安装app*/
        button.onclick = function () {
          if(isWeiXinBrowser()){
            if(isAndroind()){  
              $("#maskGuideTips").html("在浏览器中");
              $("#maskGuideIcon").attr("src","../pagesImg/download/liulanqi.png");
            }else{ 
              $("#maskGuideTips").html("在Safari中");
              $("#maskGuideIcon").attr("src","../pagesImg/download/safari.png");
            }
            $("#maskGuide").show();
            $("#maskCourse").hide();
            return false;
          }
          if(!isAndroind()){
            $("#maskGuide").hide();
            $("#maskCourse").show();
          }
          m.wakeupOrInstall();
          return false;
        }
      }
    }, data);

  </script>
</body>

</html>